<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		    *{
		    	margin: 0;
		    	padding: 0;
		    }
		    #box{
		    	margin: 0px auto;
		    	text-align: center;
		    	width: 202px;
		    }
		    dl{
		    	width: 202px;
		    }
			dt{
				width 200px;
				height: 50px;
				background: deepskyblue;
				border-bottom: white 1px solid;
			}
			dd{
				border: 1px solid darkgray;
				border-top: none;
				height: 100px;
				
			}
		</style>
		<script src="../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('dd').hide();
				$('dt').click(function(){
					$('dd').hide();
					$(this).parent().find('dd').show(200)
				});
			})
		</script>
	</head>
	<body>
		<div id="box">
			手风琴
			<dl>
				<dt>标题1</dt>
				<dd>内容1</dd>
			</dl>
			<dl>
				<dt>标题2</dt>
				<dd>内容2</dd>
			</dl>
			<dl>
				<dt>标题3</dt>
				<dd>内容3</dd>
			</dl>
			<dl>
				<dt>标题4</dt>
				<dd>内容4</dd>
			</dl>
			<dl>
				<dt>标题5</dt>
				<dd>内容5</dd>
			</dl>
		</div>
			
	</body>
</html>
